import React from 'react';
import {findDOMNode} from 'react-dom';
import echarts from 'echarts';
import * as ChartsStyle from './ChartsPie.less';

export default class ChartsPie extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  };
  drawChart = () => {
  	//引入echaets,链接画布
    let { color=({dataIndex})=>dataIndex==0?'#baf0ef':'#64dcdc', data  } = this.props;
  	let myChart = echarts.init(findDOMNode(this.refs.charts));
  	let option = {};
  	//处理图表数据
  	option = {
    legend: {
        orient: 'vertical',
        left: 'center',
        top:'bottom',
        data: ['直接访问']
    },
    tooltip: {
          trigger: 'item',
          formatter:'<p style="background: #5e6166; color: #fff; padding: 5px;">{a}</p><p style="padding: 5px;">{a0}:{c0}</p><p style="padding: 5px;">{b}:{c}%</p>',
          backgroundColor: '#ececec',
          padding: 0,
          textStyle: {
            color: '#5e6166'
          }
        },
    
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            label:{
              normal:{
                textStyle:{
                  color:'#6a6d72'
                },
                position:'inside'
              }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
            ],
            itemStyle: {
                normal:{color},
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
  	//绘制图表
  	myChart.setOption(option);

  };
  componentDidMount() {
  	//初始加载绘图
  	this.drawChart()
  };
  componentWillReceiveProps(nextProps) {
  	//数据变化画图
  	this.drawChart()
  }
  render() {
    return (
      <div ref = 'charts' className={ChartsStyle.chartPie} ></div>
    );
  }
};
